import React, { useState } from 'react';
import { StyleSheet, Text, TouchableHighlight, View } from 'react-native';
const styles = StyleSheet.create({
	container: {
		flex: 1,
		justifyContent: 'center',
		paddingHorizontal: 10
	},
	button: {
		alignItems: 'center',
		backgroundColor: '#DDDDDD',
		padding: 10
	},
	countContainer: {
		alignItems: 'center',
		padding: 10
	},
	countText: {
		color: '#FF00FF'
	}
});
const TouchableHighlightPage = () => {
	const [count, setCount] = useState(0);
	const onPress = () => setCount(count + 1);

	return (
		<View style={styles.container}>
			<TouchableHighlight onPress={onPress}>
				<View style={styles.button}>
					<Text>Touch Here</Text>
				</View>
			</TouchableHighlight>
			<View style={styles.countContainer}>
				<Text style={styles.countText}>
					{count ? count : null}
				</Text>
			</View>
		</View>
	);
};



export default TouchableHighlightPage;
